import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, Image } from '@tarojs/components'
import { Tabbar, Footer, ConsumerJobList,CompanyList } from './../../../component/index'
import './discover.less'


class Discover extends Component {

  config = {
    navigationBarTitleText: '发现'
  }

  constructor() {
    super()
    Taro.setNavigationBarColor({
      frontColor: Taro.getStorageSync('secondColor'),
      backgroundColor: Taro.getStorageSync('baseColor')
  })
    this.state = {
      imgUrls: [
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
      ],
      nowIndex: 0
    }
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  advertizeChange(e) {
    let current = e.detail.current
    this.setState({ nowIndex: current })
  }

  render() {
    const currentPage = 'consumerDiscover'
    let { imgUrls, nowIndex } = this.state
    return (
      <View className='discover'>
        <View className='headBack' style={`background-color:${Taro.getStorageSync('baseColor')}`}></View>
        <View className='swiperBlock'>
          <View className='adverSwiper'>
            <Swiper interval='3000' duration='500' onChange={this.advertizeChange.bind(this)} circular='true'>
              {
                imgUrls.length > 0 && imgUrls.map((item, index) =>
                  <Swiper-item>
                    <Image className='adverNow' src={item} onClick='imageClick'></Image>
                  </Swiper-item>
                )
              }
            </Swiper>
            <View className='dots'>
              {
                imgUrls.length && imgUrls.map((item, index) =>
                  <View class={`dot ${index == nowIndex ? 'active' : ''}`} style={`${index == nowIndex && ('background:' + Taro.getStorageSync('baseColor'))}`}></View>
                )
              }
            </View>
          </View>
        </View>
        <View className='navigationBlock'>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
          <View className='barItem'>
            <Image src='' className='itemIcon'></Image>
            <View className='itemTitle'>悬赏职位</View>
          </View>
        </View>
        <View className='individualSwiperBlock'>
          <View className='individualSwiper'>
            <Swiper interval='3000' duration='500' displayMultipleItems='3' autoplay='true' circular='true'>
              {
                imgUrls.length > 0 && imgUrls.map((item, index) =>
                  <Swiper-item>
                    <View className='individualItem'>
                      <Image className='individualImg' src={item} onClick='imageClick'></Image>
                      <View className='individualCon'>
                        <View className='itemRow'>
                          <View className='itemTitle'>阿里巴巴(浙江省杭州分公司)</View>
                        </View>
                        <View className='itemRow'>
                          <View className='itemAddress'>西湖区</View>
                          <View className='itemKm'>1.8Km</View>
                        </View>
                      </View>
                    </View>
                  </Swiper-item>
                )
              }
            </Swiper>
          </View>
        </View>
        <View className='thingLineBlock'>
          <View className='thingHeaderBlock'>
            <View className='thingHeader'>名企专区</View>
          </View>
          <CompanyList></CompanyList>
        </View>
        <View className='postLineBlock'>
          <View className='postHeaderBlock'>
            <View className='postHeader'>暑期兼职</View>
          </View>
          <ConsumerJobList jobs={JSON.parse(Taro.getStorageSync('recomandJobs'))}></ConsumerJobList>
        </View>
        <View className='footer'><Footer></Footer></View>
        <Tabbar currentPage={currentPage}></Tabbar>
      </View>
    )
  }
}

export default Discover
